import { FC, useState } from 'react';
import { Card, Input, Button, Space, Tag, Spin } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { industryReportApi } from 'services';
import MainLayout from 'components/MainLayout';

import ReportContent from './components/ReportContent/index';
import { Report } from './types';
import styles from './index.module.css';

const { Search } = Input;

const IndustryReport: FC = () => {
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);
  const [report, setReport] = useState<Report>();
  const [hasSearched, setHasSearched] = useState(false);

  // 推荐关键词
  const recommendedKeywords = [
    '碳纤维',
    '人参',
    '新能源汽车',
    '智能制造',
    '医疗器械',
    '生物医药',
    '人工智能',
    '集成电路',
  ];

  const handleSearch = async (value: string) => {
    if (!value.trim()) return;

    setLoading(true);
    try {
      const res = await industryReportApi.generateIndustryReport({ keyword: value });
      // setReport({
      //   id: '1',
      //   title: `${value}产业发展报告`,
      //   summary: '这是一份关于该产业的综合分析报告...',
      //   content: '详细内容...',
      //   references: ['参考文献1', '参考文献2'],
      //   charts: [],
      // });

      setKeyword('');
      setReport(res.data);
      setHasSearched(true);
    } catch (error) {
      console.error('生成报告失败:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <MainLayout>
      <Card bordered={false}>
        <div className={styles.searchArea}>
          <Search
            placeholder="请输入关键词"
            value={keyword}
            onChange={(e) => setKeyword(e.target.value)}
            onSearch={handleSearch}
            enterButton={
              <Button type="primary" icon={<SearchOutlined />}>
                生成报告
              </Button>
            }
            loading={loading}
          />
          <div className={styles.keywords}>
            <span>推荐关键词：</span>
            <Space size={[0, 8]} wrap>
              {recommendedKeywords?.map((kw, index) => (
                <Tag
                  key={index}
                  color="blue"
                  className={styles.keyword}
                  onClick={() => setKeyword(kw)}
                >
                  {kw}
                </Tag>
              ))}
            </Space>
          </div>
        </div>

        {loading ? (
          <div className={styles.loading}>
            <Spin size="large" />
            <div>正在生成报告，请稍候...</div>
          </div>
        ) : hasSearched && report ? (
          <ReportContent report={report} />
        ) : (
          <div className={styles.placeholder}>请输入关键词生成报告</div>
        )}
      </Card>
    </MainLayout>
  );
};

export default IndustryReport;
